<template>
    <div>
        <el-tabs type="border-card">
            <div
                style="width: 100%;height: 100px; background-color:#e8edf0;border-radius: 3px; margin-bottom: 0px;  padding: 15px 15px 0px 15px;">
                <ul class="nav-tabs" v-for=" item in Arr" :key="item.id">
                    <li><a href="" style="">{{ item }}</a></li>
                </ul>



            </div>

            <!-- <el-tab-pane label="全部"> -->
            <div v-if="seek" style="width: 100%; margin: 20px 0px;">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" size="medium">


                    <el-form-item label="ID">
                        <el-input v-model="formInline.id" placeholder="ID"></el-input>
                    </el-form-item>
                    <el-form-item label="学校名称">
                        <el-input v-model="formInline.schoolname" placeholder="学校名称"></el-input>
                    </el-form-item>

                    <el-form-item label="班级">
                        <el-input v-model="formInline.classandgrade" placeholder="班级"></el-input>
                    </el-form-item>

                    <el-form-item label="科目">
                        <el-input v-model="formInline.subject" placeholder="科目"></el-input>
                    </el-form-item>

                    <el-form-item label="发布老师">
                        <el-input v-model="formInline.Publishing_teacher" placeholder="发布老师"></el-input>
                    </el-form-item>
                    <el-form-item label="截至时间">
                        <el-input v-model="formInline.deadline" placeholder="截至时间"></el-input>
                    </el-form-item>
                    <el-form-item label="显示">
                        <el-select v-model="formInline.show" placeholder="选择">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="提交列表">
                        <el-input v-model="formInline.submit" placeholder="提交列表"></el-input>
                    </el-form-item>
                    <el-form-item label="更新时间">
                        <el-input v-model="formInline.turnover_time" placeholder="更新时间"></el-input>
                    </el-form-item>

                    <br />

                    <el-form-item>
                        <el-button type="success" @click="inquire" style="background-color: #18bc9c;">提交</el-button>
                        <el-button type="info" @click="reset" style="background-color: #f4f4f4;color: black;">重置</el-button>
                    </el-form-item>
                </el-form>
            </div> <br>
            <div style="width:100% ;border:1px solid transparent">
                <WorkAdd></WorkAdd>
            </div>


            <el-button type="info" icon="el-icon-search" plain style="float: right" @click="seek = !seek"
                size="small"></el-button>
            <el-button-group style="float: right">
                <el-button type="info" icon="el-icon-s-order" plain size="small"></el-button>

                <el-button type="info" plain size="small"><el-popover placement="bottom" title="筛选列" trigger="click"
                        width="40">
                        <el-checkbox-group v-model="checkedColumns" size="small">
                            <el-checkbox v-for="item in checkBoxGroup" :key="item" :label="item"
                                :value="item"></el-checkbox>
                        </el-checkbox-group>
                        <div title="筛选列" class="filter-table-col" slot="reference">
                            <i class="el-icon-s-grid"> </i>
                        </div>
                    </el-popover></el-button>
                <el-button type="info" icon="el-icon-upload2" plain size="small">
                </el-button>
            </el-button-group>
            <el-input placeholder="搜索" v-model="input" clearable style="width: 195px; float: right" size="small">
            </el-input>
            <!-- 表格 -->
            <div class="tableDemo">
                <el-table :data="tableData.slice(
                    (currentPage - 1) * pagesize,
                    currentPage * pagesize
                )
                    " style="width: 100%">
                    <el-table-column type="selection" align="center"> </el-table-column>
                    <!-- 对数据的处理，最最最重要的一句话 -->
                    <el-table-column v-if="colData[0].istrue" prop="id" label="ID" sortable al ign="center">
                    </el-table-column>
                    <el-table-column v-if="colData[1].istrue" prop="schoolname" label="学校名称" sortable align="center">
                    </el-table-column>
                    <el-table-column v-if="colData[2].istrue" prop="classandgrade" label="班级" sortable align="center">
                    </el-table-column>
                    <el-table-column v-if="colData[3].istrue" prop="subject" label="科目" sortable align="center">
                    </el-table-column>

                    <el-table-column v-if="colData[4].istrue" prop="Publishing_teacher" label="发布老师" align="center">
                    </el-table-column>
                    <el-table-column v-if="colData[5].istrue" prop="deadline" label="截止时间" width="180" sortable
                        align="center">

                    </el-table-column>
                    <el-table-column v-if="colData[6].istrue" prop="show" label="显示" sortable align="center">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.show" active-color="#13ce66" inactive-color="#ff4949"
                                active-value="100" inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="colData[7].istrue" prop="submit" label="提交列表" sortable align="center">
                    </el-table-column>
                    <el-table-column v-if="colData[8].istrue" prop="turnover_time" label="更新时间" width="180" sortable
                        align="center">
                    </el-table-column>

                    <el-table-column v-if="colData[9].istrue" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" class="el-icon-edit"
                                style="background-color: #18bc9c;color: #fff;"></el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
                                class="el-icon-delete" style="background-color: #f75444;color: #fff;"></el-button>

                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" align="right"
                    :current-page="currentPage" :page-sizes="[5, 10, 20, 40]" :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
                </el-pagination>
            </div>
            全部
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="待审批">待审批 </el-tab-pane>
            <el-tab-pane label="审批通过">审批通过 </el-tab-pane> -->

            <!-- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
        </el-tabs>


        <el-dialog v-dialogDrag ref="xhzqDialog" class="xhzqDialog" :title="title" :fullscreen="isfullscreens"
            :visible.sync="dialogVisibles" :append-to-body="true" :close-on-click-modal="false" :show-close="false"
            :width="width" :class="isminimizes ? 'isminimizes' : ''" center>
            <div v-show="!isminimizes" slot="title" class="medium">
                <span style="color: #fff;float: left;margin-left: 20px;">添加</span>
                <div class="centers"><span>{{ title }}</span></div>
                <div class="icons">

                    <i class="el-icon-minus" style="font-size: 24px" @click="minimizes"></i>
                    <i :class="isfullscreens ? 'el-icon-crop' : 'el-icon-full-screen'" style="font-size: 24px"
                        @click="IsFullscreens"></i>
                    <i class="el-icon-close" style="font-size: 24px" @click="closeDialogs"></i>
                </div>
            </div>
            <div v-show="isminimizes" slot="title" class="horn">
                <div class="lefts"><span>{{ title }}</span></div>
                <div class="centers"><i class="el-icon-full-screen" style="font-size: 24px" @click="minimizes"></i></div>
                <div class="rights"><i class="el-icon-close" style="font-size: 24px" @click="closeDialogs"></i></div>
            </div>
            <div v-show="!isminimizes" class="dialogBody">
                <slot>
                    <el-form ref="form" :model="forms" label-width="80px">

                        <el-form-item label="姓名">
                            <el-input v-model="forms.name"></el-input>
                        </el-form-item>

                        <el-form-item label="手机号">
                            <el-input v-model="forms.phone"></el-input>
                        </el-form-item>

                        <el-form-item label="性别">
                            <el-radio-group v-model="forms.sex">
                                <el-radio label="男"></el-radio>
                                <el-radio label="女"></el-radio>
                            </el-radio-group>
                        </el-form-item>
            <mavon-editor v-model="value" />

                        <el-form-item label="头像">
                            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/">
                                <el-input v-model="forms.desc" style="width: 50%;"></el-input><el-button type="primary"
                                    class="el-icon-upload2"
                                    style="background-color: #f75444; color: #fff;">上传</el-button><el-button
                                    class="el-icon-finished" style="background-color: #444c69; color: #fff;">选择</el-button>
                            </el-upload>
                        </el-form-item>
                        <!-- <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" style="width: 50%;"
                            :on-preview="handlePreview" :on-remove="handleRemove" :file-list="forms.img" list-type="picture">
                            <el-button size="small" type="primary">点击上传</el-button>
                            <div slot="tip" class="el-upload__tip" >只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload> -->
                    </el-form>
                </slot>
            </div>
            <div v-show="!isminimizes" v-if="isFooter" class="dialogFooter" style=" background-color: #ecf0f1;">
                <slot name="footer" solt="footer">

                    <div style="margin-right: 70%;">
                        <el-button type="success" style="background-color: #18bc9c;" @click="oks">确定</el-button>
                        <el-button type="success" style="background-color: #18bc9c;" @click="resets">重置</el-button>
                    </div>

                </slot>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { Work } from "../../request/api.js";
import WorkAdd from "../../components/WorkAdd"

export default {
    name: "ClassPROJECTIndex",

    data() {
        return {
            value:'',
            currentPage: 1, //初始页
            pagesize: 5, //    每页的数据
            input: "",
            seek: false,
            tableData: [],
            formInline: {
                id: '',
                schoolname: '',
                classandgrade: "",
                subject: '',
                Publishing_teacher: '',
                deadline: '',
                show: '',
                submit: '',
                turnover_time: '',
            },
            colData: [
                { title: "ID", istrue: true },
                { title: "学校名称", istrue: true },
                { title: "班级", istrue: true },
                { title: "科目", istrue: true },
                { title: "发布老师", istrue: true },
                { title: "截止时间", istrue: true },
                { title: "显示", istrue: true },
                { title: "提交列表", istrue: true },
                { title: "更新时间", istrue: true },
                { title: "操作", istrue: true },

            ],

            // 多选框的列表，列出表格的每一列
            checkBoxGroup: [
                "ID",
                "学校名称",
                "班级",
                "科目",
                "发布老师",
                "截止时间",
                "显示",
                "提交列表",
                "更新时间",
                "操作",
            ],
            // 当前选中的多选框，代表当前展示的列
            checkedColumns: [
                "ID",
                "学校名称",
                "班级",
                "科目",
                "发布老师",
                "截止时间",
                "显示",
                "提交列表",
                "更新时间",
                "操作",
            ],
            Arr: [
                '全部',
                'xx幼儿园',
                'XXX培训机构',
                '放大法带着',
                'wqd',
                '湖南工程',
                '信息学校',
                '石坝小学',
                '天河学校',
                '（测试',
                '测试',
                '一二托管',
                '行知',
                '高新学院',
                '南部分校',
                'xx机构',
                '华龙幼儿园',
                '融科学校',
                '第一小学',
                '西瓜O学校',
                '线上考试',
                '2132',
                '阿里',
                '985',
                'zxc',
                'XXX培训机构',
            ],
            //编辑弹窗
            isfullscreens: false, // 全屏
            isminimizes: false, // 最小化
            dialogVisibles: false, // 隐藏弹窗
            forms: {
                name: '',
                phone: '',
                sex: '',
                img: '',
                // fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]

            }
        };
    },
    created() {
        Work().then((res) => {
            this.tableData = res.data;
        });
    },
    props: {
        width: {
            type: String,
            default: '50%'
        },
        title: {
            type: String,
            default: ''
        },
        isFooter: { // 是否显示脚部
            type: Boolean,
            default: true
        }
    },
    watch: {
        checkedColumns(val) {
            let arr = this.checkBoxGroup.filter((i) => !val.includes(i));
            this.colData.filter((i) => {
                if (arr.indexOf(i.title) != -1) {
                    i.istrue = false;
                } else {
                    i.istrue = true;
                }
            });
            this.reload = Math.random();
        },
    },

    mounted() { },

    methods: {
        onSubmit() {
            console.log("submit!");
        },
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange(size) {
            this.pagesize = size; //将每页显示的条数 = 改变的值
            console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage; //然后将当前页 = 改变的值
            console.log(this.currentPage); //点击第几页
        },
        formatter(row, column) {
            return row.address;
        },

        inquire() {
            Work().then((res) => {
                let data = res.data;
                let array = []
                for (let i = 0; i < data.length; i++) {
                    if (this.formInline.id == data[i].id || this.formInline.schoolname == data[i].schoolname || this.formInline.classandgrade == data[i].classandgrade || this.formInline.subject == data[i].subject || this.formInline.Publishing_teacher == data[i].Publishing_teacher || this.formInline.deadline == data[i].deadline || this.formInline.show == data[i].show || this.formInline.submit == data[i].submit || this.formInline.turnover_time == data[i].turnover_time) {
                        array.push(data[i])
                    }
                }
                console.log(array);
                this.tableData = array

            });
        },
        reset() {
            this.formInline.id = '',
                this.formInline.schoolname = '',
                this.formInline.classandgrade = '',
                this.formInline.subject = '',
                this.formInline.Publishing_teacher = '',
                this.formInline.deadline = '',
                this.formInline.show = '',
                this.formInline.submit = '',
                this.formInline.turnover_time = ''
        },
        handleDelete(a, b) {




            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$notify({
                    //   title: '成功',
                    message: '操作成功！',
                    type: 'success'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        //修改弹窗
        // 最小化
        minimizes() {
            this.isminimizes = !this.isminimizes
            if (this.isfullscreens) this.isfullscreens = !this.isfullscreens
        },
        // 关闭弹窗
        closeDialogs() {
            this.dialogVisibles = false
        },
        // 打开弹窗
        openDialogs() {
            this.dialogVisibles = true
        },
        // 全屏
        IsFullscreens() {
            this.isfullscreens = !this.isfullscreens
            if (this.isfullscreens) this.$emit('isfullscreens')
        },
        handleEdit(a,b){
            this.dialogVisibles=true
        },
        oks() {
            this.dialogVisibles = false;
            this.$message.success('操作成功');
        },
        resets() {
            this.dialogVisibles = false;
            this.$message.success('操作成功');
        },

    },
    components: {
        WorkAdd
    },

    directives: {
        dialogDrag: {
            bind(el, binding, vnode, oldVnode) {
                const dialogHeaderEl = el.querySelector('.el-dialog__header')
                const dragDom = el.querySelector('.el-dialog')
                dialogHeaderEl.style.cursor = 'move'
                // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
                const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
                // const fixedX =
                // const fixedY =
                dialogHeaderEl.onmousedown = (e) => {
                    // 判断当前是否为全屏状态
                    const path = event.path || (event.composedPath && event.composedPath())
                    const isFull = path.find(s => {
                        if (s.className === undefined) {
                            return false
                        } else {
                            return s.className.indexOf('is-fullscreen') > -1
                        }
                    })
                    if (isFull !== undefined) {
                        return
                    }
                    const isMinix = path.find(s => {
                        if (s.className === undefined) {
                            return false
                        } else {
                            return s.className.indexOf('isminimize') > -1
                        }
                    })
                    if (isMinix !== undefined) {
                        return
                    }
                    // 鼠标按下，计算当前元素距离可视区的距离
                    const disX = e.clientX - dialogHeaderEl.offsetLeft
                    const disY = e.clientY - dialogHeaderEl.offsetTop

                    // 获取到的值带px 正则匹配替换
                    let styL, styT

                    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                    if (sty.left.includes('%')) {
                        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
                        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
                    } else {
                        styL = +sty.left.replace('px', '')
                        styT = +sty.top.replace('px', '')
                    }

                    document.onmousemove = function (e) {
                        // 通过事件委托，计算移动的距离
                        const l = e.clientX - disX
                        const t = e.clientY - disY
                        // 移动当前元素
                        dragDom.style.left = `${l + styL}px`
                        dragDom.style.top = `${t + styT}px`
                        // const dom = e.path.find(s => s.querySelector('.el-dialog')).children[0]
                        //
                        // if (dom.offsetTop < 0) {
                        //   dragDom.style.top = `0px`
                        // }
                        // if (dom.offsetLeft < 0) {
                        //   dragDom.style.left = `0px`
                        // }

                        // 将此时的位置传出去
                        // binding.value({x:e.pageX,y:e.pageY})
                    }

                    document.onmouseup = function (e) {
                        const dragDom = el.querySelector('.el-dialog')
                        const offsetLeft = dragDom.offsetLeft
                        const offsetTop = dragDom.offsetTop
                        const left = Number(dragDom.style.left.replace('px', ''))
                        const top = Number(dragDom.style.top.replace('px', ''))
                        const windowWidth = window.innerWidth
                        const windowHeight = window.innerHeight - 50
                        const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth
                        const offsetBottom = offsetTop + dragDom.offsetHeight - windowHeight
                        if (offsetLeft < 0) {
                            dragDom.style.left = (left - offsetLeft) + 'px'
                        }
                        if (offsetTop < 0) {
                            dragDom.style.top = (top - offsetTop) + 'px'
                        }
                        if (offsetRight > 0) {
                            dragDom.style.left = (left - offsetRight) + 'px'
                        }
                        if (offsetBottom > 0) {
                            dragDom.style.top = (top - offsetBottom) + 'px'
                        }
                        document.onmousemove = null
                        document.onmouseup = null
                    }
                }
            }
        }
    },
};
</script>

<style>
.nav-tabs li {
    float: left;
    margin-bottom: 1px;
}

.nav-tabs li a {
    display: block;
    color: #95a5a6;
    padding: 10px 15px;
    margin-right: 4px;
    color: #95a5a6;
    background-color: #d8e0e6;


}
</style>